import React from "react";
import Grid from "@material-ui/core/Grid";

// import useService from "../service/useService";
import service from "../service";


// import { useAlertContext } from "../contexts/AlertContext";

// import _ from "lodash";

import {ProtoContext,ProtoProvider,useProtoContext} from "./ElementListPart/context"
import ProtoClasses from "./ElementListPart/ProtoClasses"
import Protos from "./ElementListPart/Protos"
import Proto from "./ElementListPart/Proto"


export default function ElementPageWrap(props) {
	return (
		<ProtoProvider>
			<ElementPage />
		</ProtoProvider>
	);
}

function ElementPage(props) {
	const { setProto, proto, setProtos, protos, setActiveClassId, setActiveProtoId } = useProtoContext()

	const handleClassClick = async (classId) => {
		var r = await service.graphElementProtos.list({ classId });
		if (r.State == 0) {
			setProtos(r.Data);
			setActiveClassId(classId);
			if (r.Data.length > 0) {
				setActiveProtoId(r.Data[0].Id);
				handleProtoClick(r.Data[0].Id);
			}else {
				setProto({});
			}
		} else {
			console.log(r);
		}
	};
	const handleProtoClick = async (protoId) => {
		var r = await service.graphElementProtos.getProps(protoId);
		if (r.State == 0) {
			setProto(r.Data);
		} else {
			console.log(r);
		}
	};
	return (
		<Grid container>
			<Grid item xs={3}>
				<ProtoClasses onItemClick={handleClassClick}></ProtoClasses>
			</Grid>
			<Grid item xs={5}>
				<Protos onItemClick={handleProtoClick}></Protos>
			</Grid>
			<Grid item xs={4}>
				<Proto></Proto>
			</Grid>
		</Grid>
	);
}
